<template>
  <el-main>
    <div style="text-align: left">
      <span>班级管理系统</span>
      <br />
      <span>班级名称:</span>
      <el-input placeholder="班级名称" v-model="input2" style="width: 200px; margin-right: 20px"></el-input>
      <span>班主任:</span>
      <el-input placeholder="班主任" v-model="input1" style="width: 200px; margin-right: 20px"></el-input>
      <span>讲师:</span>
      <el-input placeholder="讲师" v-model="input3" style="width: 200px; margin-right: 20px"></el-input>

      <!--登陆-->
      <el-button type="info" icon="el-icon-search" @click="select">查询</el-button>
      <!--登陆-->
      <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">添加</el-button>
      <!--添加模态框-->
      <el-dialog title="新增班级" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>新增班级</span>
        <br />
        <div class="addinput">
          <el-input placeholder="班级名称" v-model="addgradeName" style="width: 300px"></el-input>
          <el-input placeholder="班级描述" v-model="addgradeDescribe" style="width: 300px"></el-input>
          <el-input placeholder="班主任ID" v-model="addclassTeacherId" style="width: 300px"></el-input>
          <el-input placeholder="讲师ID" v-model="addlecturerId" style="width: 300px"></el-input>
          <el-input placeholder="所在教室ID" v-model="addclassroomClassroomId" style="width: 300px"></el-input>
          <el-input placeholder="班主任" v-model="addclassTeacherName" style="width: 300px"></el-input>
          <el-input placeholder="讲师" v-model="addlecturerName" style="width: 300px"></el-input>
          <el-input placeholder="所在教室" v-model="addclassroomClassroomNumber" style="width: 300px"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="add(), (dialogVisible = false)">确 定</el-button>
        </span>
      </el-dialog>

      <!--修改模态框-->
      <el-dialog title="修改班级" :visible.sync="updatedialogVisible" width="30%" :before-close="handleClose">
        <span>修改班级</span>
        <br />
        <div class="addinput">
          <el-input placeholder="班级名称" v-model="upgradeName" style="width: 300px"></el-input>
          <el-input placeholder="班级描述" v-model="upgradeDescribe" style="width: 300px"></el-input>
          <!-- <el-input placeholder="班主任ID" v-model="upclassTeacherId" style="width:300px;"></el-input> -->
          <!-- <el-input placeholder="讲师ID" v-model="uplecturerId" style="width:300px;"></el-input> -->
          <!-- <el-input placeholder="所在教室ID" v-model="upclassroomClassroomId" style="width:300px;"></el-input> -->
          <el-input placeholder="班主任" v-model="upclassTeacherName" style="width: 300px"></el-input>
          <el-input placeholder="讲师" v-model="uplecturerName" style="width: 300px"></el-input>
          <el-input placeholder="所在教室" v-model="upclassroomClassroomNumber" style="width: 300px"></el-input>
          <el-input placeholder="Id" v-model="updategradeId" v-show="false"></el-input>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updatedialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="upclass(), (updatedialogVisible = false)">确 定</el-button>
        </span>
      </el-dialog>

      <!--详情模态框-->
      <el-dialog title="详情" :visible.sync="showxq" width="70%" :before-close="handleClose">
        班级id:
        {{ xiangqing.xqgradeId }}
        班级名称:
        {{ xiangqing.gradeName }}
        班级描述:
        {{ xiangqing.gradeDescribe }}
        <br />
        所在教室:
        {{ xiangqing.classroomClassroomNumber }}
        班主任:
        {{ xiangqing.lecturerName }}
        讲师:
        {{ xiangqing.classTeacherName }}
        <br />

        <br />
        <br />
        <!--详情添加-->
        <el-button type="success" icon="el-icon-edit" @click="selectstuadd(), (addshowxq = true)">添加</el-button>
        <el-table :data="tableXq">
          <el-table-column prop="studentNum" label="学号" width="150"> </el-table-column>
          <el-table-column prop="studentName" label="学生姓名" width="140">
          </el-table-column>
          <el-table-column prop="mobile" label="手机号" width="120"> </el-table-column>
          <el-table-column prop="sex" label="性别" width="140"> </el-table-column>
          <el-table-column prop="idType" label="证件类型" width="140"> </el-table-column>
          <el-table-column prop="idNum" label="证件号码" width="150"> </el-table-column>
          <el-table-column prop="nativePlace" label="籍贯" width="140"> </el-table-column>
          <el-table-column prop="address"></el-table-column>
          <!--详情删除-->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="delxq(scope.row.studentId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!--添加详情模态框-->
      <el-dialog title="新增教室" :visible.sync="addshowxq" width="65%" :before-close="handleClose">
        <br />
        <el-table :data="tableXqadd">
          <el-table-column prop="studentNum" label="学号" width="140"> </el-table-column>
          <el-table-column prop="studentName" label="学生姓名" width="140">
          </el-table-column>
          <el-table-column prop="Mobile" label="手机号" width="120"> </el-table-column>
          <el-table-column prop="sex" label="性别" width="140"> </el-table-column>
          <el-table-column prop="IdType" label="证件类型" width="140"> </el-table-column>
          <el-table-column prop="IdNum" label="证件号码" width="140"> </el-table-column>
          <el-table-column prop="NativePlace" label="籍贯" width="140"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="danger" @click="selectaddstu(scope.row.studentId), (addshowxq = false)">新增</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <router-view></router-view>

    <!-- 全查 -->
    <el-table :data="tableData">
      <el-table-column prop="gradeName" label="班级名称" width="140"> </el-table-column>
      <el-table-column prop="gradeDescribe" label="班级描述" width="140">
      </el-table-column>
      <el-table-column prop="studentsNumber" label="班级人数" width="120">
      </el-table-column>
      <el-table-column prop="classTeacherName" label="班主任" width="140">
      </el-table-column>
      <el-table-column prop="lecturerName" label="讲师" width="140"> </el-table-column>
      <el-table-column prop="classroomClassroomNumber" label="所在教室" width="140">
      </el-table-column>
      <template slot-scope=""><!-- 时间转换 -->
        <el-table-column label="创建时间" width="400">
          <template slot-scope="scope">
            <span v-html="getYMDHMS(scope.row.createTime)"></span>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="address"> </el-table-column><!-- 空 -->

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" @click="
            findupdatexq(scope.row.gradeId),
            (showxq = true),
            selectstu(scope.row.gradeId)
            ">详情</el-button>
          <el-button type="warning" @click="findupdate(scope.row.gradeId)">修改</el-button>
          <el-button type="danger" @click="del(scope.row.gradeId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row>
      <el-col style="text-align: right">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">

        </el-pagination>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "Class",
  created: function () {
    this.select();
  },
  data() {
    //下拉框选择器
    return {
      //分页
      pageNum: 1, //默认当前页数
      pageSize: 5, //默认每页显示条数
      total: 0, //总数据条数
      //详情
      xiangqing: {
        gradeName: "",
        classroomClassroomNumber: "",
        lecturerName: "",
        classTeacherName: "",
        gradeDescribe: "",
        xqgradeId: "",
      },
      input1: "",
      input2: "",
      input3: "",
      //新增
      addgradeName: "",
      addgradeDescribe: "",
      addclassTeacherId: "",
      addlecturerId: "",
      addclassroomClassroomId: "",
      addclassTeacherName: "",
      addlecturerName: "",
      addclassroomClassroomNumber: "",
      dialogVisible: false, //模态框
      //修改
      upgradeName: "",
      upgradeDescribe: "",
      // upclassTeacherId : "",
      // uplecturerId : "",
      // upclassroomClassroomId : "",
      upclassTeacherName: "",
      uplecturerName: "",
      upclassroomClassroomNumber: "",
      updategradeId: "",

      updatedialogVisible: false, //修改

      showxq: false, //详情
      addshowxq: false, //详情新增
      tableData: [], //班级全查

      tableXq: [], //详情学生全查
      tableXqadd: [], //详情学生新增全查
    };
  },
  props: {},
  methods: {
    //模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },

    select: function () {
      var that = this;
      this.$axios
        .post("/grade/queryData", {
          gradeName: this.input2,
          classTeacherName: this.input1,
          lecturerName: this.input3,

          //分页
          pageNum: that.pageNum,
          pageSize: that.pageSize,
        })
        .then(function (response) {
          console.log(response);
          that.tableData = response.data.data;
        })
        .catch(function (error) { });
    },
    // 获取当前页的数据信息
    //pageSize 默认每页显示条数改变时会触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.select(this.pageNum, this.pageSize); //console.log(`每页 ${val} 条`);
    }, //currentPage 默认当前页数改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.select(this.pageNum, this.pageSize); //console.log(`当前页: ${val}`);
    },
    add: function () {
      var that = this;
      this.$axios
        .post("/grade/saveData", {
          gradeName: this.addgradeName,
          gradeDescribe: this.addgradeDescribe,
          classTeacherId: this.addclassTeacherId,
          lecturerId: this.addlecturerId,
          classroomClassroomId: this.addclassroomClassroomId,
          classTeacherName: this.addclassTeacherName,
          lecturerName: this.addlecturerName,
          classroomClassroomNumber: this.addclassroomClassroomNumber,
        })
        .then(function (response) {
          that.select();
        });
    },
    del: function (gradeId) {
      var that = this;
      this.$axios
        .post("/grade/deleteData", {
          gradeId: gradeId,
        })
        .then(function (response) {
          that.select();
          alert("删除成功");
        });
    },
    findupdate: function (gradeId) {
      this.updatedialogVisible = true;
      var that = this;
      this.$axios
        .post("/grade/findgradeId", {
          gradeId: gradeId,
        })
        .then(function (response) {
          if (response.data.code == "0000") {
            that.upgradeName = response.data.data.gradeName;
            that.upgradeDescribe = response.data.data.gradeDescribe;
            //  that.upclassTeacherId = response.data.data.classTeacherId;
            //  that.uplecturerId = response.data.data.lecturerId;
            //  that.upclassroomClassroomId = response.data.data.classroomClassroomId;
            that.upclassTeacherName = response.data.data.classTeacherName;
            that.uplecturerName = response.data.data.lecturerName;
            that.upclassroomClassroomNumber = response.data.data.classroomClassroomNumber;
            that.updategradeId = response.data.data.gradeId;
          } else {
            //alert("修改失败");
          }
        });
    },

    upclass: function () {
      var that = this;
      this.$axios
        .post("/grade/updateData", {
          gradeId: that.updategradeId,
          gradeName: that.upgradeName,
          gradeDescribe: that.upgradeDescribe,
          classTeacherName: that.upclassTeacherName,
          lecturerName: that.uplecturerName,
          classroomClassroomNumber: that.upclassroomClassroomNumber,
        })
        .then(function (response) {
          that.select();
        });
    },
    // showDetail(product) {
    //   this.selectedProduct = product;
    //   this.xqdialogVisible = true;
    // },
    //详情
    findupdatexq: function (gradeId) {
      var that = this;
      this.$axios
        .post("/grade/findgradeId", {
          gradeId: gradeId,
        })
        .then(function (response) {
          if (response.data.code == "0000") {
            that.xiangqing.gradeName = response.data.data.gradeName;
            that.xiangqing.gradeDescribe = response.data.data.gradeDescribe;
            that.xiangqing.classTeacherName = response.data.data.classTeacherName;
            that.xiangqing.lecturerName = response.data.data.lecturerName;
            that.xiangqing.classroomClassroomNumber = response.data.data.classroomClassroomNumber;
            that.xiangqing.upgradeId = response.data.data.gradeId;
            console.log("调用查询");
          } else {
            //alert("修改失败");
          }
        });
    },
    //详情查询学生和班级表
    selectstu: function (gradeId) {
      var that = this;
      this.$axios
        .post("/grade/selectgradeId", {
          gradeId: gradeId,
        })
        .then(function (response) {
          console.log(response);
          that.tableXq = response.data.data;
          console.log("详情查询:::" + JSON.stringify(response.data.data));
        });
    },
    //详情新增查询
    selectstuadd: function () {
      var that = this;
      this.$axios.post("/grade/queryxq", {

      })
        .then(function (response) {
          that.tableXqadd = response.data.data;
          console.log("详情新增查询:::" + JSON.stringify(response.data.data));
        });
    },
    //详情新增
    selectaddstu: function (studentId) {
      var that = this;
      this.$axios
        .post("/grade/xqinsert", {
          studentId: studentId,
          gradeGradeId: that.xiangqing.upgradeId,
          gradeGradeName: that.xiangqing.gradeName,
        })
        .then(function (response) {
          that.selectstu(that.xiangqing.upgradeId);
        });
    },
    delxq: function (studentId) {
      var that = this;
      this.$axios
        .post("/grade/xqdelete", {
          studentId: studentId,
          gradeId: that.xiangqing.upgradeId,
        })
        .then(function (response) {
          that.selectstu(that.xiangqing.upgradeId);
        });
    },
    //时间格式转换
    getYMDHMS: function (timestamp) {
      let time = new Date(timestamp);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let date = time.getDate();
      let hours = time.getHours();
      let minute = time.getMinutes();
      let second = time.getSeconds();

      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      if (hours < 10) {
        hours = "0" + hours;
      }
      if (minute < 10) {
        minute = "0" + minute;
      }
      if (second < 10) {
        second = "0" + second;
      }
      return year + "-" + month + "-" + date + " " + hours + ":" + minute + ":" + second;
    },
  },
};
</script>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>
